<template>
  <!-- 添加或修改菜单对话框 -->
  <el-dialog :title="!form.id ? '新增' : '修改'"
             :visible.sync="visible">
    <el-form ref="dataForm" :model="form" :rules="rules" label-width="80px">
      <el-row>
        <el-col :span="12">
          <el-form-item label="站点名称" prop="name">
            <el-input v-model="form.name" placeholder="请输入站点名称"/>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="副标题" prop="subtitle">
            <el-input v-model="form.subtitle" placeholder="请输入副标题"/>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="上传附件" prop="fileName" >
            <avue-input-icon v-model="form.fileName" :icon-list="iconList"></avue-input-icon>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="缩略图" prop="img" >
            <avue-input-icon v-model="form.img" :icon-list="iconList"></avue-input-icon>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="选择商家" prop="companyId" >
            <el-input v-model="form.companyId" :icon-list="iconList"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="推荐商家" prop="recommendId" >
            <el-input v-model="form.recommendId" :icon-list="iconList"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="所属站点">
            <treeselect v-model="form.parentId"
                        :options="websiteOptions"
                        :normalizer="normalizer"
                        :show-count="true"
                        placeholder="所属站点"
            />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="建站方式" prop="buildType" >
            <!-- <el-input v-model="form.buildType" :icon-list="iconList"></el-input> -->
            <el-select v-model="form.buildType" placeholder="请选择建站方式">
              <el-option
                v-for="item in buildTypeList"
                :key="item.value"
                :label="item.name"
                :value="item.value"/>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="微信模板" prop="styleId">
            <el-input v-model="form.styleId" :icon-list="iconList"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="电脑模板" prop="computerStyleId" >
            <el-input v-model="form.computerStyleId" :icon-list="iconList"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="站点提成" prop="commission">
            <el-input v-model="form.commission" :icon-list="iconList"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="站点类型" prop="type">
            <!-- <el-input v-model="form.type" :icon-list="iconList"></el-input> -->
            <el-select v-model="form.type" placeholder="请选择站点类型">
              <el-option
                v-for="item in siteTypeList"
                :key="item.value"
                :label="item.name"
                :value="item.value"/>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="结账方式" prop="settlement">
            <!-- <el-input v-model="form.settlement" :icon-list="iconList"></el-input> -->
            <el-select v-model="form.settlement" placeholder="请选择站点类型">
              <el-option
                v-for="item in settlementList"
                :key="item.value"
                :label="item.name"
                :value="item.value"/>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="空间到期" prop="expireDate">
            <el-date-picker v-model="form.expireDate" value-format="yyyy-MM-dd HH:mm:ss" placeholder="请选择空间到期"></el-date-picker>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="所在城市" prop="province">
            <el-col :span="8" :offset="0">
              <el-form-item prop="province">
                  <el-select v-model="form.province" clearable filterable @change="updateCity">
                      <el-option v-for="item in provinces"
                        :key=item.id
                        :label="item.name"
                        :value=item.id>
                      </el-option>
                    </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="8" :offset="0">
              <el-form-item prop="city">
                <el-select v-model="form.city" clearable filterable @change="updateArea">
                  <el-option v-for="item in citys"
                    :key=item.id
                    :label=item.name
                    :value=item.id>
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="8" :offset="0">
              <el-form-item prop="area">
                <el-select v-model="form.area" clearable filterable>
                  <el-option v-for="item in areas"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="排序" prop="sequence">
            <el-input-number v-model="form.sequence" controls-position="right" :min="0"/>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="是否开通" prop="isOpen">
            <el-radio-group v-model="form.isOpen">
              <el-radio-button label="PD10001">是</el-radio-button>
              <el-radio-button label="PD10002">否</el-radio-button>
            </el-radio-group>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="是否显示" prop="status">
            <el-radio-group v-model="form.status">
              <el-radio-button label="ZT10001">是</el-radio-button>
              <el-radio-button label="ZT10002">否</el-radio-button>
            </el-radio-group>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button type="primary" @click="dataFormSubmit">确 定</el-button>
      <el-button @click="visible = false">取 消</el-button>
    </div>
  </el-dialog>
</template>

<script>
  import {fetchList, fetchWebsiteTree, getObj, addObj, putObj, delObj} from '@/api/sdAdmin/syswebsite'
  import {listByParent} from '@/api/sdAdmin/syslocation'
  import {fetchParamByParent} from '@/api/sdAdmin/param'
  import Treeselect from "@riophae/vue-treeselect"
  import iconList from '@/const/iconList'
  import TableForm from './'
  import "@riophae/vue-treeselect/dist/vue-treeselect.css"

  export default {
    name: "Website",
    components: {Treeselect, TableForm},
    data() {
      return {
        // 遮罩层
        loading: true,
        // 菜单树选项
        websiteOptions: [],
        // 是否显示弹出层
        visible: false,
        // 图标
        iconList: iconList,
        form: {
          id: undefined,
          name: undefined,
          province: undefined,
          city: undefined,
          area: undefined,
          parentId: undefined,
          subtitle: undefined,
          status: 'ZT10001',
          isOpen: 'PD10001',
          sequence: 999,
          expireDate: undefined
        },
        provinces: [],
        citys: [],
        areas: [],
        siteTypeList: [],
        buildTypeList: [],
        settlementList: [],
        // 表单校验
        rules: {
          name: [
            {required: true, message: "站点名称不能为空", trigger: "blur"}
          ],
          sequence: [
            {required: true, message: "站点顺序不能为空", trigger: "blur"}
          ],
          是否开通: [
            {required: true, message: "路由缓冲不能为空", trigger: "blur"}
          ],
          status: [
            {required: true, message: "权限标识不能为空", trigger: "blur"}
          ]
        }
      };
    },
    mounted () {
      this.getTreeselect()
      this.getSiteTypeList()
      this.getBuildTypeList()
      this.getSettlementList()
    },
    methods: {
      init(isEdit, id) {
        if (id != null) {
          this.form.parentId = id;
        }
        this.visible = true
        this.getProvince()
        this.$nextTick(() => {
          this.$refs['dataForm'].resetFields()
          if (isEdit) {
            getObj(id).then(response => {
              this.form = response.data.data
              this.updateCity(this.form.province)
              this.updateArea(this.form.city)
            })
          } else {
            this.form.id = undefined
          }
        })
      },
      getSiteTypeList(){
        fetchParamByParent(null,'ZD10000').then(response=>{
          this.siteTypeList = response.data.data
        })
      },
      getBuildTypeList(){
        fetchParamByParent(null,'JZFS000').then(response=>{
          this.buildTypeList = response.data.data
        })
      },
      getSettlementList(){
        fetchParamByParent(null,'ZF10000').then(response=>{
          this.settlementList = response.data.data
        })
      },
      getProvince(){
          listByParent().then(response=>{
            this.provinces = response.data.data
          })
      },
      updateCity(value){
        listByParent(value).then(response=>{
            this.citys = response.data.data
          })
      },
      updateArea(value){
        listByParent(value).then(response=>{
          this.areas = response.data.data
        })
      },
      // 表单提交
      dataFormSubmit() {
        console.log(this.form)
        this.$refs['dataForm'].validate((valid) => {
          if (valid) {
            if (this.form.parentId === undefined) {
              this.form.parentId = -1
            }

            if (this.form.id) {
              putObj(this.form).then(data => {
                this.$message.success('修改成功')
                this.visible = false
                this.$emit('refreshDataList')
              });
            } else {
              addObj(this.form).then(data => {
                this.$message.success('添加成功')
                this.visible = false
                this.$emit('refreshDataList')
              })
            }
          }
        })
      },
      /** 查询菜单下拉树结构 */
      getTreeselect() {
        fetchWebsiteTree(false).then(response => {
          this.websiteOptions = [];
          const website = {id: -1, name: '根站点', children: []};
          website.children = response.data.data;
          this.websiteOptions.push(website);
        });
      },
      /** 转换菜单数据结构 */
      normalizer(node) {
        if (node.children && !node.children.length) {
          delete node.children;
        }
        return {
          id: node.id,
          label: node.name,
          children: node.children
        };
      }
    }
  };
</script>
